import { Suspense } from 'react'
import { Canvas } from '@react-three/fiber'
import { OrbitControls, useGLTF, PerspectiveCamera } from '@react-three/drei'

function Model({ url }) {
    const { scene } = useGLTF(url)
    return <primitive object={scene.clone()} scale={2} />
}

function ModelPreview({ model, onClose }) {
    if (!model) return null

    return (
        <div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50 p-4" onClick={onClose}>
            <div className="bg-dark-800 border border-dark-700 rounded-xl max-w-4xl w-full max-h-[90vh] overflow-hidden shadow-2xl" onClick={(e) => e.stopPropagation()}>
                {/* Header */}
                <div className="p-6 border-b border-dark-700">
                    <div className="flex justify-between items-start">
                        <div>
                            <h2 className="text-2xl font-semibold text-gray-100 mb-2">{model.name}</h2>
                            <p className="text-gray-400">{model.description || '暂无描述'}</p>
                        </div>
                        <button
                            onClick={onClose}
                            className="w-10 h-10 flex items-center justify-center rounded-lg bg-dark-700 hover:bg-dark-600 text-gray-400 hover:text-white transition-colors"
                        >
                            ✕
                        </button>
                    </div>
                </div>

                {/* 3D Preview */}
                <div className="h-[500px] bg-dark-900">
                    <Canvas>
                        <PerspectiveCamera makeDefault position={[0, 0, 5]} fov={50} />
                        <color attach="background" args={['#0a0a0f']} />
                        <ambientLight intensity={1} />
                        <pointLight position={[10, 10, 10]} intensity={1.5} />
                        <pointLight position={[-10, -10, -10]} intensity={1} />
                        <directionalLight position={[5, 5, 5]} intensity={1} />

                        <Suspense fallback={null}>
                            <Model url={model.url} />
                        </Suspense>

                        <OrbitControls
                            enablePan={true}
                            enableZoom={true}
                            enableRotate={true}
                            autoRotate={true}
                            autoRotateSpeed={2}
                            minDistance={2}
                            maxDistance={10}
                        />
                    </Canvas>
                </div>

                {/* Footer */}
                <div className="p-6 border-t border-dark-700 flex gap-3">
                    <a
                        href={model.url}
                        download={`${model.name}.glb`}
                        className="btn-primary flex-1 text-center"
                    >
                        📥 下载模型
                    </a>
                    <button
                        onClick={onClose}
                        className="btn-secondary flex-1"
                    >
                        关闭
                    </button>
                </div>
            </div>
        </div>
    )
}

export default ModelPreview
